<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 引入bootstarp -->
    <script type="text/javascript" src="../js/bootstrap3/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../js/bootstrap3/css/bootstrap.css">
    <!-- 引入bootstrap table的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-table/bootstrap-table.css">
    <script type="text/javascript" src="../js/bootstrap-table/bootstrap-table.js"></script>
    <script type="text/javascript" src="../js/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <!-- 引入bootstrap datetime的css、js -->
    <link type="text/css" rel="stylesheet" href="../js/bootstrap-datetimepicker/css/bootstrap-datetimepicker.css">
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../js/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

    <script src="../js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="../js/bootstrap-fileinput/js/locales/zh.js"></script>
    <link rel="stylesheet" href="../js/bootstrap-fileinput/css/fileinput.css">

</head>
<body>
<div class="container-fluid">
    <form id="bookForm" class="form-horizontal">
        <div class="form-group">
            <label for="userName" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userName" name="userName">
                <input type="text" id="id" name="id" style="display: none;">
            </div>
            <label for="userAge" class="col-sm-2 control-label">年龄</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userAge" name="userAge">
            </div>
        </div>
        <div class="form-group">
            <label for="userAccount" class="col-sm-2 control-label">登录账号</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" id="userAccount" name="userAccount">
            </div>
        </div>
        <div class="form-group">
            <label for="userImg" class="col-sm-2 control-label">封面</label>
            <div class="col-sm-10">
                <input type="file" multiple class="projectfile" accept="image/*" name="imgfile" id="userImg">
                <input type="text" id="hideImg" name="userImg" style="display: none;"/>
            </div>
        </div>
    </form>
</div>
</body>
<script>

   function initFileInput(url){
       $('#userImg').fileinput({
           initialPreview:url,
           //初始化图片配置：
           initialPreviewConfig: [
               {key: 1, showDelete: false}
           ],
           //是否初始化图片显示
           initialPreviewAsData: true,
           language: 'zh', //设置语言
           uploadUrl: '../wjs/upload', //上传的地址
           allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
           showUpload: true, //是否显示上传按钮
           showCaption: false,//是否显示标题
           browseClass: "btn btn-primary", //按钮样式
           //dropZoneEnabled: false,//是否显示拖拽区域
           //minImageWidth: 50, //图片的最小宽度
           //minImageHeight: 50,//图片的最小高度
           //maxImageWidth: 1000,//图片的最大宽度
           //maxImageHeight: 1000,//图片的最大高度
           //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
           //minFileCount: 0,
           maxFileCount: 2, //表示允许同时上传的最大文件个数
           enctype: 'multipart/form-data',
           validateInitialCount:true,
           previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
           msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

       }).on('fileuploaded', function(event, data, previewId, index) {
           var imgval = data.response.img;
           //隐藏框id
           $('#hideImg').val(imgval);
       });
   }
</script>
</html>